<template>
  <div class="cmap">
    <div class="blank"></div>
    <div class="main">
      <div class="text">
        <span>
          <ul>
            <li v-for="(item, index) of numArr" :key="index">{{ item }}</li>
          </ul>
        </span>
        <h3>近一年累计访问人次</h3>
      </div>
      <div id="cmapChart" class="cmapChart"></div>
      <!-- <div id="cmapChart2" class="cmapChart2"></div> -->
    </div>
  </div>
</template>

<script>
import guangzhouJson from "./map/guangzhou.json";
import "echarts/map/js/world.js";
import { geoCoordMap, pvData } from "../js/data";
import { worldPositions, worldPvData } from "../js/world";
import { ledSetValue } from "../js/led";
import * as echarts from "echarts";

// 注册广州地图数据
echarts.registerMap("guangzhou", guangzhouJson);

export default {
  data() {
    return {
      mapId: "cmapChart",
      numArr: [1, 2, 5, 6, 8, 9], //近一年访问量数据
      regionData: [], // 存储各区域随机数
      option: {
        geo3D: {
          map: "guangzhou",
          roam: true,
          center: [113.280714, 23.125624],
          zoom: 1.2,
          regionHeight: 2,
          shading: "lambert",
          viewControl: {
            alpha: 25,
            beta: 30,
            distance: 80,
            zoom: 0.6,
          },
          label: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
              backgroundColor: "rgba(0,23,11,0.5)",
              padding: [4, 8],
              textShadow: "0 2px 4px rgba(0,0,0,0.5)",
              borderRadius: 4,
              borderWidth: 1,
              borderColor: "rgba(255,255,255,0.3)",
            },
          },
          itemStyle: {
            color: "#52A9E9", // 地图板块的颜色
            borderColor: "rgb(30, 101, 172)", // 地图边配色
            borderWidth: 1,
            opacity: 0.8,
          },
          emphasis: {
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 14,
                backgroundColor: "rgba(0,23,11,0.7)",
                textShadow: "0 2px 4px rgba(0,0,0,0.7)",
                borderRadius: 4,
                borderWidth: 1,
                borderColor: "rgba(255,255,255,0.5)",
              },
            },
            itemStyle: {
              areaColor: "rgb(16, 214, 240)",
            },
          },
        },
        series: [
          {
            name: "城市",
            type: "scatter3D",
            coordinateSystem: "geo3D",
            symbol: "circle",
            symbolSize: 6,
            data: this.convertData(
              pvData.filter((item) =>
                [
                  "荔湾区",
                  "越秀区",
                  "海珠区",
                  "天河区",
                  "白云区",
                  "黄埔区",
                  "番禺区",
                  "花都区",
                  "南沙区",
                  "从化区",
                  "增城区",
                ].includes(item.name)
              )
            ),
            emphasis: {
              itemStyle: {
                color: "rgb(223, 241, 62)",
              },
              label: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [4, 8],
                  backgroundColor: "rgba(0,23,11,0.5)",
                },
                formatter: (val) => {
                  return val.data.name + "\n" + val.data.value[2];
                },
              },
            },
            itemStyle: {
              color: "#02FD32",
              shadowBlur: 10,
              shadowColor: "#333",
            },
          },
          {
            name: "迁徙",
            type: "lines3D",
            coordinateSystem: "geo3D",
            data: this.getLinesData(),
            lineStyle: {
              color: "#02FD32",
              width: 1,
              opacity: 0.6,
              curveness: 0.2,
            },
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              symbol: "arrow",
              symbolSize: 5,
            },
          },
        ],
      },
    };
  },
  methods: {
    convertData(pvData) {
      var res = [];
      for (var i = 0; i < pvData.length; i++) {
        var geoCoord = geoCoordMap[pvData[i].name];
        if (geoCoord) {
          res.push({
            name: pvData[i].name,
            value: [geoCoord[0], geoCoord[1], pvData[i].value],
          });
        }
      }
      return res;
    },
    getLinesData() {
      const lines = [];
      const targetRegions = [
        "荔湾区",
        "海珠区",
        "天河区",
        "白云区",
        "黄埔区",
        "番禺区",
        "花都区",
        "南沙区",
        "从化区",
        "增城区",
      ];

      const sourceCoord = geoCoordMap["越秀区"];

      targetRegions.forEach((region) => {
        const targetCoord = geoCoordMap[region];
        if (targetCoord) {
          lines.push({
            coords: [
              [sourceCoord[0], sourceCoord[1], 0],
              [targetCoord[0], targetCoord[1], 0],
            ],
            lineStyle: {
              color: "#02FD32",
              width: 1,
              opacity: 0.6,
              curveness: 0.2,
            },
          });
        }
      });

      return lines;
    },
    init() {
      const chartDom = document.getElementById(this.mapId);
      const myChart = echarts.init(chartDom);
      this.option.series[0].events = {
        click: function (params) {
          alert("你点击了：" + params.name + ", " + params.value);
        },
      };
      myChart.setOption(this.option);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: "fontled";
  src: url("../js/led.ttf");
}
.cmap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  .blank {
    width: 100%;
    height: 4rem;
  }
  .main {
    flex: 1;
    background-image: url("../../../../static/images/commonServer/gridCenter.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    transform-style: preserve-3d;
    perspective: 62rem;
    overflow: hidden;
    height: calc(100% - 4rem);
    .text {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 6rem;
      text-align: center;
      z-index: 1;
      ul {
        display: inline-block;
        margin: 1rem auto 0;
        li {
          float: left;
          margin: 0 0.3rem;
          font-family: fontled;
          color: #a3c9f5;
          line-height: 3.5rem;
          font-size: 3rem;
          font-weight: 600;
          width: 3rem;
          height: 4rem;
          background-image: url("../../../../static/images/commonServer/numBg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      h3 {
        color: #cfecff;
        font-size: 1.4rem;
      }
    }
    .cmapChart {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
@keyframes arc {
  0% {
    opacity: 0;
    z-index: 0;
  }
  49% {
    opacity: 0;
    z-index: 0;
  }
  50% {
    transform: translateZ(600px);
    opacity: 1;
    z-index: 1;
  }
  55% {
    transform: translateZ(0);
    opacity: 1;
    z-index: 1;
  }
  100% {
    transform: translateZ(0px);
    opacity: 1;
    z-index: 1;
  }
}
@keyframes arc2 {
  0% {
    opacity: 1;
    z-index: 1;
    transform: translateZ(600px);
  }
  5% {
    opacity: 1;
    z-index: 1;
    transform: translateZ(0px);
  }
  49% {
    opacity: 1;
    z-index: 1;
    transform: translateZ(0px);
  }
  50% {
    transform: translateZ(0px);
    opacity: 0;
    z-index: 0;
  }
  100% {
    transform: translateZ(0px);
    opacity: 0;
    z-index: 0;
  }
}
</style>